<template>
  <div class="sidebarCheck" style="height:100%;overflow:hidden;">
    <div :style="{height: setHeight}"></div>
    <a-tabs type="card" size="small">
      <a-tab-pane tab="部门列表" key="1">
        <div style="position: relative;padding-top: 40px;">
          <div style="padding: 0 10px;position: absolute;height:40px;left:0;top:0px;width: 100%; ">
              <a-input-search placeholder="请输入关键字" @search="searchDept" />
            </div>
          <div :style="heightTree" style="overflow:auto">
            <div style="padding: 0 10px;">
              <a-tree
                :size="'small'"
                :treeData="deptTree"
                :checkable="checkable"
                @check="onCheck"
                @select="onSelect"
                :checkStrictly="false"
                :checkedKeys="checked"
                :selectedKeys="selected"
                :expandedKeys="iExpandedKeys"
                :autoExpandParent="autoExpandParent"
                @expand="onExpand"
              >
                   <template slot="title" slot-scope="{title}">
                    <span v-if="title.indexOf(searchValue) > -1">
                      {{title.substr(0, title.indexOf(searchValue))}}
                      <span style="color: #f50">{{searchValue}}</span>
                      {{title.substr(title.indexOf(searchValue) + searchValue.length)}}
                    </span>
                    <span v-else>{{title}}</span>
                  </template>
              </a-tree>
            </div>
          </div>
        </div>
      </a-tab-pane>

    </a-tabs>
  </div>
</template>
<script>
import dept from "@/api/accessControlSystem/dept";

export default {
  props: {
    // deptselected: Array,
    heightTree: String,
    checkable:Boolean,
    setHeight: {
      type: String,
      default: "4px"
    },
  },
    components: {

  },
  data() {
    return {
      autoExpandParent: true, //是否自动展开父节点
      checked: [],
      selected: [],
      iExpandedKeys:[],
      deptTree: [],
      searchValue:""
    };
  },
  created (){
    let _this = this;
    dept.getTreeListWithData({ pid: 0 }).then(res => {
      _this.deptTree = res.result;
      console.log(_this.deptTree);

      if (_this.deptTree != "") {
          _this.iExpandedKeys = [_this.deptTree[0].key];
      }
    });
  },
  computed: {
    // deptSelectedComputed: {
    //   get: function() {
    //     return this.deptSelected;
    //   },
    //   set: function(value) {
    //     this.$emit("update:deptSelected", value);
    //     this.$emit("on-select", value);
    //   }
    // },
    // deptCheckedComputed: {
    //   get: function() {
    //     return this.deptChecked;
    //   },
    //   set: function(value) {
    //     this.$emit("update:deptChecked", value);
    //     this.$emit("on-check", value);
    //   }
    // },

  },
  methods: {

    // 查询部门
     searchDept(value) {
       console.log(value);

       this.onSearch(value)
    },
    //树形选中
    onCheck(checked) {
      this.$emit("update:checked", checked);
      this.$emit("on-check", checked);
      this.checked = checked;
      console.log(checked);
      console.log(this.selected);
      this.selected = [];
      console.log(this.selected);
    },
    // 树形选择
    onSelect(selectedKeys, info) {
      this.$emit("update:selected", selectedKeys);
      this.$emit("on-select", selectedKeys);
      this.$emit("on-select-info", info);
      this.selected = selectedKeys;
      console.log( selectedKeys);

      this.checked = [];

    },

        // 用监听事件监听serchValue得值，有变化就执行onSearch方法
    async onSearch(value) {
      let that = this;
    //根据value过滤树节点符合搜索值得节点，返回相应id数组，赋值给iExpandedKeys
      let keys = await dept.searchDeptByKey({ key: value });

      if (keys.success) {
        that.iExpandedKeys = keys.result;
        that.searchValue = value;
      }
    },
    onExpand(expandedKeys) {
      this.iExpandedKeys = expandedKeys;
      this.autoExpandParent = false;
    }

  }
};
//
</script>

<style>
/*布局*/

</style>
